<template>
  <a-layout>
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <side :collapsed="collapsed" />
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="collapsedtoggle"
        />
        <menu-fold-outlined v-else class="trigger" @click="collapsedtoggle" />
        <a-breadcrumb>
          <a-breadcrumb-item>
            <router-link to="/index/home">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item v-for="(v, i) in crumb" :key="i">{{
            v
          }}</a-breadcrumb-item>
        </a-breadcrumb>
      </a-layout-header>
      <a-layout-content> <router-view></router-view></a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { ref, reactive, toRefs, inject } from "vue"
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import side from '../components/side/index.vue'
export default {
  name: "App",
  components: {

    MenuUnfoldOutlined,
    MenuFoldOutlined,
    side
  },
  setup () {
    const collapsed = ref(false)
    const crumb = inject('crumb')
    const collapsedtoggle = () => {
      collapsed.value = !collapsed.value
    }
    return {
      collapsed,
      collapsedtoggle,
      crumb
    }
  }
}
</script>

<style lang="scss" scoped>
.ant-layout {
  width: 100%;
  height: 100%;
  .ant-layout-side {
    height: 100%;
    background: #263445;
  }
  .ant-layout {
    text-align: left;
    .ant-layout-header {
      background: white;
      box-shadow: 0 1px 4px #ccc;
      align-items: center;
      display: flex;
      padding: 0 20px;
      .trigger {
        font-size: 18px;
        padding: 0 20px;
        cursor: pointer;
        transition: color 0.3s;
      }

      .trigger:hover {
        color: #1890ff;
      }
    }
    .ant-layout-content {
      margin: 20px 40px;
      overflow-y: auto;
      overflow-x: hidden;
      color: black;
      background: white;
    }
  }
}
</style>
